<template>
  <div class="SpeakerSetupMain">
    <NavBar :title="'喇叭设置'" @leftClick="leftClick" />
    <commonPage />
    <!-- //延迟时间区域 -->
    <div class="SpeakerSetupBox">
      <div class="BoxTop">
        <span class="BoxText">延迟时间</span>
        <span>{{ hornDelay }}</span>
        <!-- <van-slider
          v-model="value"
          @change="onChangeOriginal"
          bar-height="6px"
          :max="40"
          :min="0"
          active-color="#0A59F7"
          button-size="16px"
        /> -->
      </div>
      <div class="BoxBom">
        <span
          :class="[
            ic_voice_some ? 'ic_voice_some_active' : 'ic_voice_some',
            'ic_pat',
          ]"
          @touchstart="handlerIconSome"
          @touchend="handlerIconAdd"
        ></span>
        <van-slider
          v-model="voiceNum"
          @change="onChangeOriginal"
          bar-height="4px"
          :max="400"
          :min="0"
          active-color="#0A59F7"
          button-size="16px"
        />
        <!-- <span>{{ voiceNum }}</span> -->
        <span
          :class="[
            ic_voice_add ? 'ic_voice_add_active' : 'ic_voice_add',
            'ic_pat',
          ]"
          @touchstart="handlericvoiceadd"
          @touchend="handlericvoiceaddIconAdd"
        ></span>
      </div>
    </div>
    <!-- 静音区域 -->
    <div class="muteBox">
      <div class="mainjy">
        <div class="boxLeftjy">
          <div>音量</div>
          <div class="fontNumjy">{{ valuejy }}</div>
        </div>
        <van-slider
          v-model="valuejy"
          button-size="16px"
          @change="onChange"
          :max="100"
          :min="0"
          bar-height="4px"
          active-color="#0A59F7"
        />
      </div>
      <div class="line"></div>
      <div class="muteBoxTop">
        <div class="muteBoxLeft">静音</div>
        <van-switch v-model="checked" size="24px" @change="changeSwitch" />
      </div>
      <div class="line"></div>
      <div class="muteBoxBom">
        <div class="muteBoxLeft">相位</div>
        <div class="muteBoxrigthBox">
          <span class="muteBoxText">{{ handlerSpeakerval }}</span>
          <span :class="['ic_arrows']" @click="handlerIcarrows"></span>
        </div>
      </div>
    </div>
    <movement
      :isMoveMainBox="isMoveMainBox"
      @hanlderCancel="hanlderCancel"
      @handlerSpeakerRadio="handlerSpeakerRadio"
    />
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import commonPage from "../../components/commonPage.vue";
import movement from "../../components/movement.vue";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  components: {
    NavBar,
    commonPage,
    movement,
  },
  name: "SpeakerSetup",
  data() {
    return {
      value: 0,
      voiceNum: 0,
      valuejy: 0,
      ic_voice_some: false,
      ic_voice_add: false,
      checked: false,
      isMoveMainBox: false,
      handlerSpeakerval: "",
    };
  },
  computed: {
    ...mapState({
      loudspeaker: (state) => state.ble.loudspeaker,
      hornDelay: (state) => state.ble.hornDelay,
      SpeakerVolume: (state) => state.ble.SpeakerVolume,
      SpeakerNumber: (state) => state.ble.SpeakerNumber,
    }),
  },
  watch: {
    hornDelay(newV) {
      this.voiceNum = newV;
    },
    SpeakerVolume(newV) {
      this.valuejy = newV;
    },
  },
  created() {
    this.voiceNum = this.hornDelay;
    this.valuejy = this.SpeakerVolume;
  },
  mounted() {
    window.hilink && window.hilink.setTitleVisible(false);
  },
  beforeDestroy() {
    window.hilink && window.hilink.setTitleVisible(true);
  },
  methods: {
    leftClick() {
      this.$router.push("/");
    },
    onChangeOriginal(val) {
      let str =
        `F05505000D0B${this.loudspeaker}${val.toString(16).padStart(4, 0)}` +
        this.$getCheckSum(
          `F05505000D0B${this.loudspeaker}${val.toString(16).padStart(4, 0)}`
        );
      console.log("喇叭设置1---" + str);
      window.bleManage.send(str);
      console.log(val.toString(16).padStart(4, 0));
    },
    onChange(val) {
      let str =
        `F05505000D09${this.loudspeaker}${this.SpeakerNumber}${val
          .toString(16)
          .padStart(2, 0)}` +
        this.$getCheckSum(
          `F05505000D09${this.loudspeaker}${this.SpeakerNumber}${val
            .toString(16)
            .padStart(2, 0)}`
        );
      console.log("喇叭音量---" + str);
      window.bleManage.send(str);
    },
    handlerIconSome() {
      if (this.voiceNum == 0) {
        this.voiceNum = 0;
        return;
      }
      this.voiceNum--;
      this.ic_voice_some = true;
      let str =
        `F05505000D0B${this.loudspeaker}${this.voiceNum
          .toString(16)
          .padStart(4, 0)}` +
        this.$getCheckSum(
          `F05505000D0B${this.loudspeaker}${this.voiceNum
            .toString(16)
            .padStart(4, 0)}`
        );
      console.log("喇叭延迟加" + str);
      window.bleManage.send(str);
      console.log(this.voiceNum);
    },
    handlerIconAdd() {
      this.ic_voice_some = false;
    },
    handlericvoiceadd() {
      this.voiceNum++;
      this.ic_voice_add = true;
      let str =
        `F05505000D0B${this.loudspeaker}${this.voiceNum
          .toString(16)
          .padStart(4, 0)}` +
        this.$getCheckSum(
          `F05505000D0B${this.loudspeaker}${this.voiceNum
            .toString(16)
            .padStart(4, 0)}`
        );
      console.log("喇叭延迟加" + str);
      window.bleManage.send(str);
      console.log(this.voiceNum);
    },
    handlericvoiceaddIconAdd() {
      this.ic_voice_add = false;
    },
    changeSwitch(val) {
      this.checked = val;
      console.log(this.checked, this.handlerSpeakerval.includes("正"));
      if (this.checked && this.handlerSpeakerval.includes("正")) {
        let str =
          `F05505000D09${this.loudspeaker}10${this.SpeakerVolume.toString(
            16
          ).padStart(2, 0)}` +
          this.$getCheckSum(
            `F05505000D09${this.loudspeaker}10${this.SpeakerVolume.toString(
              16
            ).padStart(2, 0)}`
          );
        console.log("喇叭静音正---" + str);
        window.bleManage.send(str);
      } else if (this.checked && this.handlerSpeakerval.includes("反")) {
        let str =
          `F05505000D09${this.loudspeaker}11${this.SpeakerVolume.toString(
            16
          ).padStart(2, 0)}` +
          this.$getCheckSum(
            `F05505000D09${this.loudspeaker}11${this.SpeakerVolume.toString(
              16
            ).padStart(2, 0)}`
          );
        console.log("喇叭静音反---" + str);
        window.bleManage.send(str);
      }
    },
    // 显示弹框 正相输入事件
    handlerIcarrows() {
      // console.log(111);
      this.isMoveMainBox = true;
    },
    // 子传父正相输入事件
    handlerSpeakerRadio(val) {
      console.log(val);
      this.handlerSpeakerval = val;
      this.isMoveMainBox = false;
    },
    // 子传父取消事件
    hanlderCancel() {
      this.isMoveMainBox = false;
    },
  },
};
</script>

<style lang="less" scoped>
.SpeakerSetupMain {
  .SpeakerSetupBox {
    width: 336px;
    height: 136px;
    background: #ffffff;
    opacity: 1;
    border-radius: 16px;
    margin: auto;
    margin-top: 44px;
    padding: 4px 0px;
    .BoxTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
      margin: 0 16px;
      .BoxText {
        // display: inline-block;
        width: 120px;
        font-size: 14px;
        color: var(--font);
      }
    }
    .BoxBom {
      display: flex;
      justify-content: space-around;
      //   align-content: center;
      align-items: center;
      width: 336px;
      height: 64px;
      .van-slider {
        position: relative;
        width: 70%;
        height: 2px;
        background-color: #ebedf0;
        border-radius: 27.75rem;
        cursor: pointer;
      }
    }
  }
  .muteBox {
    width: 336px;
    height: 168px;
    background: #ffffff;
    border-radius: 16px;
    margin: auto;
    margin-top: 12px;
    padding: 4px 12px;
    font-size: 16px;
    .mainjy {
      display: flex;
      align-items: center;
      height: 64px;
      .boxLeftjy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 88px;
        height: 64px;
        font-size: 16px;
        .fontNumjy {
          font-size: 12px;
          color: var(--font_gray);
        }
      }
    }
    .muteBoxTop {
      display: flex;
      justify-content: space-between;
      //   width: 312px;
      // background-color: red;
      height: 48px;
      align-items: center;
      //   padding: 0px 0px;
      // .van-switch{
      //   background-color: var(--switch_bg);
      // }
    }
    .line {
      height: 0.5px;
      background: var(--border);
      transform: scaleY(0.1);
    }
    .muteBoxBom {
      display: flex;
      justify-content: space-between;
      height: 48px;
      align-items: center;
      .muteBoxText {
        //   display: inline-block;
        font-size: 14px;
        color: var(--font_gray);
        margin-right: 4px;
      }
      .muteBoxrigthBox {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>